<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/26
  Time: 12:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ihdnrGRX1wZeOWEG6aGfYad8j9ppIggK"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>



<%--vue包裹--%>
<div class="container" id="app">

    <div class="container">
{{book.bid}}
        <div class="" style="height: 635px;background-color: rgb(251,251,251);" >
            <!--   顶部 -->
            <div class="dingbu row" style="padding-top: 40px;padding-left: 80px">
                <div class="dingbu_left col-lg-5" style="height: 550px;width: 505px;  border: 3px inset #e3e3e3;position: relative">
                    <img class="img-rounded" :src="imgSrc(book.bid)" alt="" >
                    <button class="btn-primary btn-lg" style="width: 70px;position: absolute;left: -10px;top: -5px;">{{book.bgrade}}</button>
                </div>
                <div class="dingbu_right col-lg-5" style="height: 550px;width: 490px;background-color: #eeeeee;margin-left: 25px">
                    <div class="text-center" style="margin-top: 20px"><p style="font-weight: bold;font-size: 30px">{{book.bname}}</p>
                        <p >作者：<b>{{book.bwriter}}</b></p>

                    </div>
                    <div style="height: 340px;margin-top: 40px;padding-top: 30px;border-top: 1px solid #e3e3e3">
                        <span>简介：<b>{{book.binfo}}</b></span>
                        <div style="margin-top: 30px;margin-left: 180px"><button class="buy btn-success" @click="addCart"  style="margin-left: 110px">添加到购物车</button></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="text-center" style="line-height: 40px;width: 160px;height: 40px;font-weight: bold;font-size: 20px">
            更多图书
        </div>


        <div class="container" style="border: 4px solid #eeeeee;width: 1137px;background-color: rgb(251,251,251)" >
            <div v-for="(book1,i) in books">

                <div class=" kapian  col-lg-3 col-md-4 col-sm-6 col-xs-6" style="position: relative">
                    <div class="thumbnail shangpin">
                        <img :src="imgSrc(book1.bid)" alt="..."  class="img-responsive" style="height: 250px;width: 200px">
                        <div class="caption" style="height: 131px">
                            <h4>{{book1.bname}}</h4>
                            <p style="font-size: 10px">作者：{{book1.bwriter}}</p>
                            <button class="btn-danger">{{book1.bprice}}￥</button>

                            <button class="btn-primary" style="position: absolute;left: 0px;top: 0px">评分:{{book1.bgrade}}</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

</div>
<%--vue包裹结束--%>


<%--下部区开始--%>
<div class="container" style="margin-top: 60px">
    <div class="row">
        <div class="mod_copyright col-md-12 text-center" >
            <p class="mod_copyright_links" style="font-size: 11px">
                关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  鞋品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
            </p>
            <p class="mod_copyright_info" style="font-size: 11px">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn  <br>
                京ICP备08001421号京公网安备110108007702
            </p>

        </div>
    </div>
</div>
<%--        下部区结束--%>





<script>
    var vue = new Vue({
        el:'#app',
        data(){
            return{
                user:JSON.parse(localStorage.getItem("user")),
                books:JSON.parse(localStorage.getItem("books")),
                book:JSON.parse(localStorage.getItem("book"))
            }
        },
        methods:{
            imgSrc(bid){
                return "img/"+bid+".jpg"
            },
            addCart(){
                alert("123")
                    axios.post("${pageContext.request.contextPath}/cart/addCart",{
                        "cid":this.book.bid,
                        "cname":this.book.bname,
                        "cprice":this.book.bprice,
                        "uid":this.user.uId
                    }).then(function (response) {
                            if (response.data=="0"){
                                alert("您已经添加过了")
                            }else {

                            }
                    })
            }

        }


    })
</script>





</body>
</html>
